<template>
  <view class="index g_content">
    <view class="custom c_yellow" :style="'top:' + customTop + 'px'" @click="goBack">
      <u-icon name="arrow-left" color="#FBAD02"></u-icon>
      <text>返回</text>
    </view>
    <view class="main">
      <view class="header" :style="'padding-top:' + titleHeight + 'px'">
        <view class="search-box">
          <input v-model="queryObj.name" placeholder="输入关键词搜索商品" style="width: 70%;" @confirm="updateData"/>
          <u-icon name="close-circle" v-if="goodsQuery.name" @click="clear"></u-icon>
          <text class="search-icon" @click="updateData">搜索</text>
        </view>
      </view>
    </view>
    <view class="p_10">
      <s-goods-list :goodsList="list" :showCart="true"></s-goods-list>
    </view>
  </view>
</template>

<script>
import { getGoodsListApi } from "@/sheep/api/index";
import { myMixins } from "@/mixins/myMixins";
export default {
  mixins: [myMixins],
  data() {
    return {
      goodsList: [],
      titleHeight: 0,
      customTop: 0,
      windowHeight: uni.getSystemInfoSync().windowHeight,
      list: [],
      queryObj: {
        name: "",
      },
    };
  },
  onLoad() {
    this.getHeight();
  },
  onShow(options) {},
  methods: {
    getList() {
      getGoodsListApi(this.queryObj).then((res) => {
        this.list = this.list.concat(res.rows);
        this.total = res.total;
        if (this.queryObj.pageNum * this.queryObj.pageSize < this.total) {
          this.status = "loadmore";
        } else {
          this.status = "nomore";
        }
        uni.stopPullDownRefresh();
      });
    },
    // 获取微信右上角胶囊高度
    getHeight() {
      let res = uni.getMenuButtonBoundingClientRect();
      this.titleHeight = res.top + res.height + 16;
      this.customTop = res.top + 6;
    },
    goBack() {
      uni.navigateBack();
    },
    goInfo(data) {
      uni.navigateTo({
        url: "/pages/info/index?goodsId=" + data.goodsId,
      });
    },
    clear() {
      this.goodsQuery.name = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  .custom {
    position: absolute;
    left: 30rpx;
    font-size: 30rpx;
    display: flex;
    align-items: center;
  }
  .main {
    padding: 0 30rpx;
    .header {
      display: flex;
      padding: 42rpx 0;
      color: #fff;
      justify-content: space-between;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        // background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/indexbg.png")
        // no-repeat;
        // background-size: 100% auto;
        background: #222020;
        z-index: -2;
      }
      .search-box {
        // background-color: #fff;
        border: #fff 1rpx solid;
        border-radius: 40rpx;
        width: 100%;
        height: 70rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5rpx 0 30rpx;
        color: #fff;
        font-size: 26rpx;
        .search-icon {
          background-color: #000;
          border-radius: 40rpx;
          color: #fff;
          height: 60rpx;
          width: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .goodsList {
    flex: 4;
    .goodsItem {
      padding: 15rpx 30rpx;
      display: flex;
      align-items: center;
      .goodsInfo {
        flex: 1;
        padding: 0 0 0 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .wordLimit {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /* 设置最大显示行数 */
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
        .goodsBottom {
          display: flex;
          justify-content: space-between;
          .goodsBut {
            display: flex;
            border-radius: 6rpx;
            font-size: 24rpx;
            width: 120rpx;
            height: 40rpx;
            background-color: yellow;
            align-items: center;
            justify-content: center;
            border: #dddddd 1rpx solid;
          }
        }
      }
    }
  }
  //瀑布流
  .load-txt {
    padding: 0 0 20rpx 0;
    text-align: center;
    color: #999;
    font-size: 24rpx;
  }
  .load-icon {
    width: 300rpx;
    height: 300rpx;
    margin: 0 auto 20rpx auto;
    display: block;
  }
}
</style>
